<template>
  <el-dialog
    :title="id ? '结算费率修改' : '结算费率添加'"
    :visible.sync="dialogVisible"
    width="60%"
    :close-on-click-modal="false"
  >
    <el-form
      ref="main-form"
      :model="form"
      :rules="rules"
      label-width="180px"
      :inline="true"
    >
      <el-form-item label="费率名称" size="mini" prop="rateName">
        <el-input
          placeholder=""
          v-model="form.rateName"
          @keyup.enter.native="submit"
          clearable
        ></el-input>
      </el-form-item>

      <el-form-item label="交易手续费(%)" size="mini" prop="serviceFee">
        <el-input
          placeholder="交易手续费，百分比"
          v-model.number="form.serviceFee"
          type="number"
          @keyup.enter.native="submit"
          clearable
        ></el-input>
      </el-form-item>

      <el-form-item label="保证金费率(%)" size="mini" prop="bondFee">
        <el-input
          placeholder="保证金费率，百分比"
          v-model.number="form.bondFee"
          type="number"
          @keyup.enter.native="submit"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item
        label="保证金提现周期（天）"
        size="mini"
        prop="bondWithdrawPeriod"
      >
        <el-input
          placeholder="保证金提现周期（天，180表示T+180）"
          v-model.number="form.bondWithdrawPeriod"
          type="number"
          @keyup.enter.native="submit"
          clearable
        ></el-input>
      </el-form-item>
      <!--  -->
      <el-form-item label="单笔交易手续费（元）" size="mini" prop="perFee">
        <el-input
          placeholder="单笔交易手续费（元）"
          v-model.number="form.perFee"
          type="number"
          @keyup.enter.native="submit"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="每笔转账手续费（元）" size="mini" prop="transPerFee">
        <el-input
          placeholder="每笔转账手续费（元）"
          v-model.number="form.transPerFee"
          type="number"
          @keyup.enter.native="submit"
          clearable
        ></el-input>
      </el-form-item>

      <el-form-item
        label="每笔提现手续费（元）"
        size="mini"
        prop="withdrawPerFee"
      >
        <el-input
          placeholder="每笔提现手续费（元）"
          v-model.number="form.withdrawPerFee"
          type="number"
          @keyup.enter.native="submit"
          clearable
        ></el-input>
      </el-form-item>

      <el-form-item label="3D判定费" size="mini" prop="threeDJudgeFee">
        <el-input
          placeholder="3D判定费"
          v-model.number="form.threeDJudgeFee"
          type="number"
          @keyup.enter.native="submit"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="3D手续费" size="mini" prop="threeDFee">
        <el-input
          placeholder="3D手续费"
          v-model.number="form.threeDFee"
          type="number"
          @keyup.enter.native="submit"
          clearable
        ></el-input>
      </el-form-item>

      <el-form-item label="单笔退款手续费" size="mini" prop="refundFee">
        <el-input
          placeholder="单笔退款手续费"
          v-model.number="form.refundFee"
          type="number"
          @keyup.enter.native="submit"
          clearable
        ></el-input>
      </el-form-item>

      <el-form-item label="拒付处理费" size="mini" prop="disFeeId">
        <!-- <el-input placeholder="拒付处理费" v-model.number="form.disFeeId" type="number" @keyup.enter.native="submit" clearable></el-input> -->
        <el-select v-model="form.disFeeId" size="small" clearable>
          <el-option
            v-for="item in disFeeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="拒付调查费" size="mini" prop="disLookIntoFee">
        <el-input
          placeholder="拒付调查费"
          v-model.number="form.disLookIntoFee"
          type="number"
          @keyup.enter.native="submit"
          clearable
        ></el-input>
      </el-form-item>

      <el-form-item label="失败处理费" size="mini" prop="transFailFee">
        <el-input
          placeholder="失败处理费"
          v-model.number="form.transFailFee"
          type="number"
          @keyup.enter.native="submit"
          clearable
        ></el-input>
      </el-form-item>

      <el-form-item label="最小提现金额" size="mini" prop="minWithdrawAmount">
        <el-input
          placeholder="最小提现金额，固定金额"
          v-model.number="form.minWithdrawAmount"
          type="number"
          @keyup.enter.native="submit"
          clearable
        ></el-input>
      </el-form-item>

      <el-form-item label="最大提现金额" size="mini" prop="maxWithdrawAmount">
        <el-input
          placeholder="最大提现金额，固定金额"
          v-model.number="form.maxWithdrawAmount"
          type="number"
          @keyup.enter.native="submit"
          clearable
        ></el-input>
      </el-form-item>

      <el-form-item label="最小转账金额" size="mini" prop="minTransAmount">
        <el-input
          placeholder="最小转账金额，固定金额"
          v-model.number="form.minTransAmount"
          type="number"
          @keyup.enter.native="submit"
          clearable
        ></el-input>
      </el-form-item>

      <el-form-item label="最大转账金额" size="mini" prop="maxTransAmount">
        <el-input
          placeholder="最大转账金额，固定金额"
          v-model.number="form.maxTransAmount"
          type="number"
          @keyup.enter.native="submit"
          clearable
        ></el-input>
      </el-form-item>

      <el-form-item label="备注" size="mini">
        <el-input
          placeholder="备注"
          v-model="form.remark"
          @keyup.enter.native="submit"
          clearable
        ></el-input>
      </el-form-item>

      <el-row>
        <el-col
          ><el-link type="danger" :underline="false"
            >PS: 结算费率填写的金额币种为该商户的结算币种</el-link
          ></el-col
        >
      </el-row>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <!-- <el-popover
        v-if="id != null"
        placement="top"
        width="160"
        v-model.number="popDeleteVisible">
        <p>确定删除吗？</p>
        <div style="text-align: right; margin: 0">
          <el-button size="mini" type="default" @click="popDeleteVisible = false">取消</el-button>
          <el-button type="danger" size="mini" @click="submitDel">确定</el-button>
        </div>
        <el-button type="danger" slot="reference"  size="small" style="float: left;" :loading="loading">删 除</el-button>
      </el-popover> -->

      <el-button @click="close" size="small">取 消</el-button>
      <el-button type="primary" @click="submit" size="small" :loading="loading"
        >提 交</el-button
      >
    </div>
  </el-dialog>
</template>

<script>

import ApiMain from '@/api/mch.rateSettle';
import ApiProtest from '@/api/mch.protest';
import ApiRateBoc from '@/api/exchangeRate.rateBoc';
import { settleTypeOptions } from '@/const/constant'

export default {
  mixins: [
  ],
  props: [
  ],
  data() {
    return {

      dialogVisible: false,
      popDeleteVisible: false,
      loading: false,
      disFeeOptions: [],
      form: {
        disFeeId:"",
        rateName: '',
        serviceFee: '',
        bondFee: '',
        bondWithdrawPeriod: '',
        transPerFee: '',
        perFee: '',
        refundFee: '',
        withdrawPerFee: '',
        disLookIntoFee: '',
        threeDJudgeFee: '',
        threeDFee: '',
        transFailFee: '',
        minWithdrawAmount: '',
        maxWithdrawAmount: '',
        minTransAmount: '',
        maxTransAmount: '',
        bondWithdrawPeriod: 180,
        remark: '',
      },

      rules: {
        disFeeId: [
          { required: true, message: '请选择阶级处理费', trigger: 'blur' },
        ],
        rateName: [
          { required: true, message: '请输入费率名称', trigger: 'blur' },
        ],

        bondWithdrawPeriod: [
          { required: true, message: '请输入保证金结算周期', trigger: 'blur' },
          { pattern: /^\d+$/, message: '只能输入整数', trigger: 'change' },
        ],
        transFailFee: [
          { pattern: /^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/, message: '最多两位小数', trigger: 'change' }
        ],
        disLookIntoFee: [
          { pattern: /^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/, message: '最多两位小数', trigger: 'change' }
        ],
        serviceFee: [
          { pattern: /^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/, message: '最多两位小数', trigger: 'change' }
        ],
        bondFee: [
          { pattern: /^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/, message: '最多两位小数', trigger: 'change' }
        ],
        bondWithdrawPeriod: [
          { pattern: /^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/, message: '最多两位小数', trigger: 'change' }
        ],
        transPerFee: [
          { pattern: /^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/, message: '最多两位小数', trigger: 'change' }
        ],
        perFee: [
          { pattern: /^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/, message: '最多两位小数', trigger: 'change' }
        ],
        threeDJudgeFee: [
          { pattern: /^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/, message: '最多两位小数', trigger: 'change' }
        ],
        withdrawPerFee: [
          { pattern: /^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/, message: '最多两位小数', trigger: 'change' }
        ],
        minTransAmount: [
          { pattern: /^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/, message: '最多两位小数', trigger: 'change' }
        ],
        maxTransAmount: [
          { pattern: /^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/, message: '最多两位小数', trigger: 'change' }
        ],
      },

      id: null,
      data: null,

      settleTypeOptions: settleTypeOptions

    }
  },
  mounted() {
  },

  methods: {

    async show(id = null) {

      this.id = id;
      this.disFeeOptions = await ApiProtest.option()

      
      if (this.id) {
        this.fetchData();
      }
      else {
        this.reset();
      }

      this.dialogVisible = true;
    },

    close() {
      this.dialogVisible = false;
      this.$emit('dialog-close');
    },

    reset() {
      this.form = {
        rateName: '',
        serviceFee: '',
        bondFee: '',
        bondWithdrawPeriod: '',
        disLookIntoFee: '',
        threeDJudgeFee: '',
        transFailFee: '',
        disFeeId: '',
        transPerFee: '',
        perFee: '',
        withdrawPerFee: '',
        minWithdrawAmount: '',
        maxWithdrawAmount: '',
        minTransAmount: '',
        maxTransAmount: '',
        bondWithdrawPeriod: 180,
        remark: '',
      };
    },

    handleFormatInputNum(e, value) {
      console.log(e, value)
    },

    fetchData() {

      ApiMain.info({ id: this.id })
        .then(re => {
          this.data = re;

        })
        .catch(() => {
          this.data = null;
        })
        .finally(() => {
          this.renderData();
        });
    },

    renderData() {
      this.form.rateName = this.data.rateName;
      this.form.serviceFee = this.data.serviceFee / 100;
      this.form.bondFee = this.data.bondFee / 100;
      this.form.bondWithdrawPeriod = this.data.bondWithdrawPeriod / 100
      this.form.transPerFee = this.data.transPerFee / 100
      this.form.withdrawPerFee = this.data.withdrawPerFee / 100
      this.form.threeDFee = this.data.threeDFee / 100
      this.form.perFee = this.data.perFee / 100
      this.form.disFeeId = this.data.disFeeId
      this.form.refundFee = this.data.refundFee / 100
      this.form.transFailFee = this.data.transFailFee / 100
      this.form.disLookIntoFee = this.data.disLookIntoFee / 100
      this.form.threeDJudgeFee = this.data.threeDJudgeFee / 100
      this.form.minWithdrawAmount = this.data.minWithdrawAmount / 100
      this.form.maxWithdrawAmount = this.data.maxWithdrawAmount / 100
      this.form.minTransAmount = this.data.minTransAmount / 100
      this.form.maxTransAmount = this.data.maxTransAmount / 100
      this.form.bondWithdrawPeriod = this.data.bondWithdrawPeriod
      this.form.remark = this.data.remark;
    },

    verifyForm() {
      var bool = true;
      this.$refs['main-form'].validate((valid) => bool = valid);
      return bool;
    },

    async submit() {

      if (!this.verifyForm()) return false;

      if (this.form.serviceFee <= 0 || this.form.serviceFee > 100) {
        this.$message.info('交易费率在0-100区间')
        return
      }
      if (this.form.bondFee <= 0 || this.form.bondFee > 100) {
        this.$message.info('保证金费率在0-100区间')
        return
      }

      this.loading = true;

      try {
        if (this.id) {
          await this.submitSet();
        }
        else {
          await this.submitAdd();
        }
      } finally {
        this.loading = false;
      }
    },

    async submitDel() {

      this.popDeleteVisible = false;
      this.loading = true;

      await ApiMain.del({ id: this.id });

      this.loading = false;
      this.close();
      this.$message({ message: '删除成功', type: 'success' });
    },

    async submitSet() {

      this.form.id = this.id;
      let form = JSON.parse(JSON.stringify(this.form))
      form = this.formatForm(form)
      await ApiMain.set(form);
      this.$message({ message: '修改成功', type: 'success' });
      this.close();

    },

    async submitAdd() {

      let form = JSON.parse(JSON.stringify(this.form))
      form = this.formatForm(form)
      await ApiMain.add(form);
      this.$message({ message: '添加成功', type: 'success' });
      this.close();
    },

    formatForm(form) {
      // form.perFee = (form.perFee == '' ? 0 : Number((form.perFee * 100)).toFixed(0))
      form.serviceFee = Number((form.serviceFee == '' ? 0 : Number((form.serviceFee * 100)).toFixed(0)))
      form.bondFee = Number((form.bondFee == '' ? 0 : Number((form.bondFee * 100)).toFixed(0)))
      form.bondWithdrawPeriod = (form.bondWithdrawPeriod == '' ? 0 : Number((form.bondWithdrawPeriod)).toFixed(0))
      form.transPerFee = (form.transPerFee == '' ? 0 : Number((form.transPerFee * 100)).toFixed(0))
      form.withdrawPerFee = (form.withdrawPerFee == '' ? 0 : Number((form.withdrawPerFee * 100)).toFixed(0))
      form.minWithdrawAmount = (form.minWithdrawAmount == '' ? 0 : Number((form.minWithdrawAmount * 100)).toFixed(0))
      form.maxWithdrawAmount = (form.maxWithdrawAmount == '' ? 0 : Number((form.maxWithdrawAmount * 100)).toFixed(0))
      form.minTransAmount = (form.minTransAmount == '' ? 0 : Number((form.minTransAmount * 100)).toFixed(0))
      form.maxTransAmount = (form.maxTransAmount == '' ? 0 : Number((form.maxTransAmount * 100)).toFixed(0))

      // form.disFeeId = (form.disFeeId == '' ? 0 : Number((form.disFeeId * 100)).toFixed(0))
      form.threeDJudgeFee = (form.threeDJudgeFee == '' ? 0 : Number((form.threeDJudgeFee * 100)).toFixed(0))
      form.threeDFee = (form.threeDFee == '' ? 0 : Number((form.threeDFee * 100)).toFixed(0))
      form.perFee = (form.perFee == '' ? 0 : Number((form.perFee * 100)).toFixed(0))
      form.refundFee = (form.refundFee == '' ? 0 : Number((form.refundFee * 100)).toFixed(0))
      form.disLookIntoFee = (form.disLookIntoFee == '' ? 0 : Number((form.disLookIntoFee * 100)).toFixed(0))
      form.transFailFee = (form.maxTransAmount == '' ? 0 : Number((form.transFailFee * 100)).toFixed(0))
      return form
    }
  }
}
</script>

<style>
</style>
